<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>恩爸商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/category.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="js/bannerData.js"></script>
    <script src="js/slider.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="js/notify/toastr.min.css"></script>
    <script src="js/notify/toastr.min.js"></script>
    <script src="js/notify/notify.js"></script>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-bar">
        <div class="container">
            <div class="location">
                <i class="fas fa-map-marker-alt"></i>
                <span>配送至：</span>
                <span class="city">北京</span>
            </div>
            <div class="top-links">
                <a href="#" class="top-link-item">
                    <i class="fas fa-user"></i>
                    <span>登录</span>
                </a>
                <a href="#" class="top-link-item">
                    <i class="fas fa-user-plus"></i>
                    <span>注册</span>
                </a>
                <a href="myOrders.html" class="top-link-item">
                    <i class="fas fa-clipboard-list"></i>
                    <span>我的订单</span>
                </a>
                <a href="cart.html" class="top-link-item cart-link">
                    <i class="fas fa-shopping-cart"></i>
                    <span>购物车</span>
                    <span class="cart-count">0</span>
                </a>
                <a href="favorites.html" class="top-link-item">
                    <i class="fas fa-heart"></i>
                    <span>我的收藏</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 头部搜索 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">恩爸商城</a>
            </div>
            <div class="search">
                <input type="text" placeholder="请输入商品关键词">
                <button class="search-btn">搜索</button>
            </div>
        </div>
    </header>

    <!-- 主导航 -->
    <nav class="main-nav">
        <div class="container">
            <ul class="nav-items">
                <li class="category">
                    <a href="#">全部商分类</a>
                    <div class="category-container">
                        <ul class="category-menu">
                            <!-- JS动态插入分类 -->
                        </ul>
                    </div>
                </li>
                <li><a href="#">首页</a></li>
                <li><a href="#">秒杀</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">品牌闪购</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="main-content">
        <div class="container">
            <div class="content-wrapper">
                <!-- 分类和轮播图区域 -->
                <div class="main-banner">
                    <div class="container">
                        <!-- 左侧分类菜单 -->
                        <div class="category-wrapper">
                            <div class="category-title">
                                <i class="icon-category"></i>
                                全部商品分类
                            </div>
                            <div class="category-content show">
                                <ul class="category-list" id="categoryList">
                                    <!-- 通过JavaScript动态渲染 -->
                                </ul>
                            </div>
                        </div>
                        
                        <!-- 中间轮播图 -->
                        <div class="banner">
                            <div class="banner-slider">
                                <div class="slider-wrapper" id="sliderWrapper">
                                    <!-- 轮播图内容将通过JS动态渲染 -->
                                </div>
                                <div class="slider-dots" id="sliderDots">
                                    <!-- 指示点将通过JS动态渲染 -->
                                </div>
                                <div class="slider-arrows">
                                    <span class="arrow arrow-left">&lt;</span>
                                    <span class="arrow arrow-right">&gt;</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧用户信息 -->
                        <div class="user-info">
                            <div class="user-header">
                                <div class="user-avatar">
                                    <img src="images/store1.png" alt="用户头像">
                                </div>
                                <div class="user-welcome">Hi，欢迎来到恩爸商城</div>
                                <div class="user-btns">
                                    <button class="btn-login">登录</button>
                                    <button class="btn-register">注册</button>
                                </div>
                            </div>
                            <div class="notice">
                                <div class="notice-title">商城公告</div>
                                <div class="notice-list">
                                    <div class="notice-item">
                                        <a href="#">恩爸商城618大促即将开始</a>
                                    </div>
                                    <div class="notice-item">
                                        <a href="#">新品上市，限时特惠</a>
                                    </div>
                                    <div class="notice-item">
                                        <a href="#">会员专享，折上再折</a>
                                    </div>
                                    <div class="notice-item">
                                        <a href="#">积分兑换，好礼不断</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 在这里添加商品列表区域 -->
    <div class="product-section">
        <div class="container">
            <div class="product-list">
                <!-- JS动态插入商品 -->
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-service">
                <ul>
                    <li>
                        <span class="icon-quality"></span>
                        <span>品质保障</span>
                    </li>
                    <li>
                        <span class="icon-delivery"></span>
                        <span>极速配送</span>
                    </li>
                    <li>
                        <span class="icon-support"></span>
                        <span>售后无忧</span>
                    </li>
                </ul>
            </div>
            <div class="footer-links">
                <!-- 页脚链接 -->
            </div>
            <div class="copyright">
                Copyright © 2024 恩爸商城 All Rights Reserved
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div class="login-modal" id="loginModal" style="display: none;">
        <div class="login-container">
            <div class="login-box">
                <span class="close-btn">&times;</span>
                <div class="login-header">
                    <h2>密码登录</h2>
                    <span class="switch-qr">扫码登录</span>
                </div>
                <div class="login-form">
                    <div class="form-item">
                        <input type="text" id="username" placeholder="请输入账号/手机号/邮箱">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item">
                        <input type="password" id="password" placeholder="请输入密码">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-options">
                        <label>
                            <input type="checkbox">
                            <span>记住登录</span>
                        </label>
                        <a href="#" class="forget-pwd">忘记密码</a>
                    </div>
                    <button class="login-btn">登录</button>
                    <div class="other-login">
                        <div class="divider">
                            <span>其他登录方式</span>
                        </div>
                        <div class="login-icons">
                            <a href="#" class="icon-weixin">微信</a>
                            <a href="#" class="icon-qq">QQ</a>
                            <a href="#" class="icon-weibo">微博</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 忘记密码模态框 -->
    <div class="forget-modal" id="forgetModal" style="display: none;">
        <div class="forget-container">
            <div class="forget-box">
                <span class="close-btn">&times;</span>
                <div class="forget-header">
                    <h2>找回密码</h2>
                </div>
                <div class="forget-form">
                    <div class="form-item">
                        <input type="text" id="forgetPhone" placeholder="请输入手机号">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item verify-code">
                        <input type="text" id="verifyCode" placeholder="请输入验证码">
                        <button class="send-code-btn">获取验证码</button>
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item">
                        <input type="password" id="newPassword" placeholder="请输入新密码">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item">
                        <input type="password" id="confirmPassword" placeholder="请确认新密码">
                        <div class="error-msg"></div>
                    </div>
                    <button class="submit-btn">重置密码</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="register-modal" id="registerModal" style="display: none;">
        <div class="register-container">
            <div class="register-box">
                <span class="close-btn">&times;</span>
                <div class="register-header">
                    <h2>注册账号</h2>
                    <span class="switch-login">已有账号，去登录</span>
                </div>
                <div class="register-form">
                    <div class="form-item">
                        <input type="text" id="regPhone" placeholder="请输入手机号">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item verify-code">
                        <input type="text" id="regVerifyCode" placeholder="请输入验证码">
                        <button class="send-code-btn">获取验证码</button>
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item">
                        <input type="password" id="regPassword" placeholder="设置登录密码">
                        <div class="error-msg"></div>
                    </div>
                    <div class="form-item">
                        <input type="password" id="regConfirmPassword" placeholder="确认登录密码">
                        <div class="error-msg"></div>
                    </div>
                    <div class="agreement">
                        <label>
                            <input type="checkbox" id="agreeTerms">
                            <span>我已阅读并同意</span>
                        </label>
                        <a href="#" class="terms-link">《服务协议》</a>
                        <a href="#" class="terms-link">《隐私政策》</a>
                    </div>
                    <button class="register-submit-btn" disabled>注册</button>
                </div>
            </div>
        </div>
    </div>

<!-- 注册模态框 -->
<div class="register-modal" id="registerModal" style="display: none;">
    <div class="register-container">
        <div class="register-box">
            <span class="close-btn">&times;</span>
            <div class="register-header">
                <h2>注册账号</h2>
                <span class="switch-login">已有账号，去登录</span>
            </div>
            <div class="register-form">
                <div class="form-item">
                    <input type="text" id="regPhone" placeholder="请输入手机号">
                    <div class="error-msg"></div>
                </div>
                <div class="form-item verify-code">
                    <input type="text" id="regVerifyCode" placeholder="请输入验证码">
                    <button class="send-code-btn">获取验证码</button>
                    <div class="error-msg"></div>
                </div>
                <div class="form-item">
                    <input type="password" id="regPassword" placeholder="设置登录密码">
                    <div class="error-msg"></div>
                </div>
                <div class="form-item">
                    <input type="password" id="regConfirmPassword" placeholder="确认登录密码">
                    <div class="error-msg"></div>
                </div>
                <div class="agreement">
                    <label>
                        <input type="checkbox" id="agreeTerms">
                        <span>我已阅读并同意</span>
                    </label>
                    <a href="#" class="terms-link">《服务协议》</a>
                    <a href="#" class="terms-link">《隐私政策》</a>
                </div>
                <button class="register-submit-btn" disabled>注册</button>
            </div>
        </div>
    </div>
</div>

    <script type="module" src="js/categories.js"></script>
    
    <script src="js/productData.js"></script>
    <script type="module" src="js/main.js"></script>
    <script type="module" src="js/login.js"></script>
</body>
</html> 